<template>
  <div class="post" @click="$router.push({path :`/articleDetail${post.id}`})">
    <!-- 形态1：左右结构 - 1张图 -->
    <div class="type1" v-if="post.type === 1 && post.cover.length <=2">
      <div class="left">
        <h3 class="title">{{post.title}}</h3>
        <p class="desc">
          <span>{{post.user.nickname}}</span>
          <span>{{post.comment_length}}跟帖</span>
        </p>
      </div>
      <van-image class="right" fit="cover" :src="post.cover[0].url"></van-image>
    </div>
    <!-- 形态2：上下结构 - 3张图 -->
    <div class="type2" v-else-if="post.type === 1 && post.cover.length >=3">
      <div class="title">{{post.title}}</div>
      <div class="cover-group">
        <van-image class="cover" fit="cover" v-for="item in post.cover" :key="item.id" :src="item.url"></van-image>
      </div>
      <p class="desc">
        <span>{{post.user.nickname}}</span>
        <span>{{post.comment_length}}跟帖</span>
      </p>
    </div>
    <!-- 形态3：上下结构 - 1个视频 -->
    <div class="type3" v-else-if="post.type === 2">
      <div class="title">{{post.title}}</div>
      <div class="video-group">
        <i class="iconfont iconshipin"></i>
        <van-image class="video-img" fit="cover" :src="post.cover[0].url"></van-image>
      </div>
      <p class="desc">
        <span>{{post.user.nickname}}</span>
        <span>{{post.comment_length}}跟帖</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
      //结束从父组件传过来的数据
    post: {
      type: Object,
      required: true
    }
  },
//   //过滤器
//   filters:{
//       imgUrl(val){
//           return val
//       }
//   }
}
</script>

<style lang='less' scoped>
// 标题和跟帖抽离出来
.title {
  font-size: 16px;
  margin: 5px 0;
}

.desc {
  margin: 5px 0;
  color: #ccc;
  span {
    font-size: 12px;
    margin-right: 10px;
  }
}

// 形态1：左右解构 - 1张图
.type1 {
  display: flex;
  padding: 10px;
  .left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .right {
    width: 120px;
    height: 75px;
  }
}

.type2 {
  padding: 10px;
  .cover-group {
    display: flex;
    justify-content: space-between;
    .cover {
      width: 33%;
    }
  }
}

.type3 {
  padding: 10px;
  .video-group {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    .iconshipin {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      z-index: 1;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.5);
      font-size: 50px;
      color: #fff;
    }

    .video-img {
      width: 100%;
    }
  }
}
</style>